<template>
	<div class="relative box-content"
		:style="'width:' + wrapSize.width + 'px;height:' + wrapSize.height + 'px;border:1px solid #ccc;'">
		<el-tooltip v-for="item in props.viewInfoData.data.value" :key="item.id" :content="item.name"
			placement="top-start">
			<div class="absolute border border-dashed border-main cursor-pointer overflow-hidden flex justify-center items-center"
				:style="{
					width: item.width / ratio + 'px',
					height: item.height / ratio + 'px',
					left: item.left / ratio + 'px',
					top: item.top / ratio + 'px'
				}">
				{{ item.name }}
			</div>
		</el-tooltip>
	</div>
</template>

<script lang="ts" setup>
import { watchEffect } from "vue";
let props = defineProps({
	viewInfoData: {
		type: Object,
		default: {}
	},
	rowData: {
		ttype: Object,
		default: {}
	}
});

const wrapSize = reactive({
	width: 0,
	height: 0
})
const ratio = 7;
watchEffect(() => {
	const size = props.rowData.resolution.split('*').map(item => Number(item))
	wrapSize.width = size[0] / ratio
	wrapSize.height = size[1] / ratio
	console.log(`parentValue is now: ${props.rowData}`);

});


</script>
